import React, { useState, useEffect } from 'react'
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
import { View, Text, Input, Textarea } from '@tarojs/components'
import { GoodEle, Direction } from '@/components/Good'
import { Observer, useLocalStore } from 'mobx-react'
import { checkListModel } from '@/model/CheckListModel'
import { cartModel } from '@/model/CartModel'
import { DesktopOrderType } from '@/utils/constants';
import Price from '@/components/Price'

import { Icon } from '@/components/Icon'
import './index.scss'
import { SubmitBarEle } from '@/components/SubmitBar'
import { sceneDesktopManager } from '@/model/SceneDesktopManger'
import { ButtonEle, ButtonType, ButtonSize } from "@/components/Buttton";
import { Tabs } from '@/components/Tabs'
import { Tab } from '@/components/Tab'

export default () => {
  const cartStore = useLocalStore(() => cartModel);
  const store = useLocalStore(() => checkListModel);
  const [more, setMore] = useState<boolean>(false);  // 是否显示所有商品

  const router = useRouter();

  const { id, address, mobile, name } = router.params;

  useDidShow(async () => {
    if (id) {
      store.setValue('id', +id);
      store.setValue('address', { address, mobile, name });
    }
    // 设置商户类型：餐饮或其它
    await cartStore.getConfig();
    store.getData();
    store.setValue('isCatering', cartStore.isCatering);
    sceneDesktopManager.setEle(router);

  });

  const takeoutItem = (store: any) => {
    return <View className='table__content'>
      {
        store.id === 0 &&
        <View className="scan-wrap">
          <View className='table__title'>您的收货地址为空，请选择收货地址！</View>
          <ButtonEle
            customClass="xxm-btn xxm-btn-scan"
            type={ButtonType.INFO}
            size={ButtonSize.SM}
            square
            disabled={store.items.length === 0}
            onClick={() => Taro.navigateTo({ url: '/pages/checklist/address/index' })}
            round
          >
            <Icon
              name="add-circle"
              size={14}
              color="#F43443"
              customIconStyle={{ marginRight: 2 }}
            />
              选择地址
          </ButtonEle>
        </View>
      }
      {
        store.id !== 0 &&
        <View>
          <View className='table__text address'>{store.address.address}</View>
          <View className='table__text name'>
            {store.address.name}
            <View style={{
              marginLeft: 20,
              display: 'inline-block'
            }}>{store.address.mobile}</View>
          </View>
        </View>
      }
    </View >
  }

  return (
    <Observer>
      {
        () => {
          const itemList = !more ? store.items.slice(0, 2) : store.items;
          return (
            <View className='container'>
              {
                store.isCatering === true &&
                <View className='header'>
                  <Tabs
                    customClass="order-tab-content"
                    active={sceneDesktopManager.orderType || DesktopOrderType[0]}
                    onChange={(index, name) => {
                      sceneDesktopManager.setOrderType(name);
                    }}
                  >
                    <Tab title="堂食" name={DesktopOrderType[0]}>
                      <View className='table__content'>

                        {
                          sceneDesktopManager.getDesktopNo() !== '0' &&
                          <View>
                            <View className='table__title'>您的座位号是</View>
                            <View className='table__number'>{sceneDesktopManager.getDesktopNo() || '-'}号桌</View>
                          </View>
                        }
                        {
                          sceneDesktopManager.getDesktopNo() === '0' &&
                          <View className="scan-wrap">
                            <View className='table__title'>您的座位号尚未获取，请扫码获取！</View>
                            <ButtonEle
                              customClass="xxm-btn xxm-btn-scan"
                              type={ButtonType.INFO}
                              size={ButtonSize.SM}
                              square
                              disabled={store.items.length === 0}
                              onClick={() => sceneDesktopManager.scanTable()}
                              round
                            >
                              <Icon
                                name="scanning"
                                size={12}
                                color="#F43443"
                                customIconStyle={{ marginRight: 2 }}
                              />
                              请扫码获取
                            </ButtonEle>
                          </View>
                        }
                      </View>
                    </Tab>
                    <Tab title="外卖" name={DesktopOrderType[1]}>
                      {takeoutItem(store)}
                    </Tab>
                    <Tab title="自取" name={DesktopOrderType[2]}>
                      <View className='table__content'>
                        <View className='pick_name'>
                          {cartStore.shopDetail.name || '-'}
                        </View>
                        <View className='pick_address'>
                          <Icon
                            name="map"
                            size={14}
                            color="#575757"
                            customIconStyle={{ marginRight: 4 }}
                          />
                          {cartStore.shopDetail.address || '-'}
                        </View>
                        <View className='pick_time'>
                          <Icon
                            name="time"
                            size={12}
                            color="#575757"
                            customIconStyle={{ paddingLeft:2, marginRight: 5 }}
                          />
                          08:30 - 22:00
                        </View>
                      </View>
                    </Tab>
                  </Tabs>
                </View>
              }
              {
                store.isCatering === false &&
                <View className='header'>
                  <View className='table__content other box'>
                    {takeoutItem(store)}
                  </View>
                </View>
              }
              <View className='goods__box box'>
                <View className='ordered'>已{store.isCatering ? '点菜品' : '购物'} ({store.total})</View>
                <View className='goods__list'>
                  {
                    itemList.map(({ Good: it, number }, idx: number) => (
                      <GoodEle
                        direction={Direction.ROW}
                        img={it.main_pic}
                        title={it.nick || it.name}
                        desc={it.brief}
                        price={it.price}
                        oldPrice={it.market_price}
                        discount={it.dis}
                        number={number}
                        key={it.id}
                        id={it.id}
                        readonly
                      />
                    ))
                  }
                </View>
                {
                  !more &&
                  <View
                    className='goods__more xxm-hairline--top'
                    onClick={() => {
                      setMore(true)
                    }}
                  >
                    展开更多
                  <Icon name="arrow-down" size={12} color="#7E7E7E" />
                  </View>
                }
                {
                  more &&
                  <View
                    className='goods__more xxm-hairline--top'
                    onClick={() => {
                      setMore(false)
                    }}
                  >
                    点击收起
                  <Icon name="arrow-up" size={12} color="#7E7E7E" />
                  </View>
                }
              </View>

              {
                store.isCatering &&
                <View className='box other_price'>
                  {
                    sceneDesktopManager.orderType === DesktopOrderType[0] &&
                    <View className="row">
                      <View className='label' >餐具费</View>
                      <View className='price'><Price price={store.tablewareCost || 0} type={'sale'}></Price></View>
                    </View>
                  }
                  {
                    sceneDesktopManager.orderType !== DesktopOrderType[0] &&
                    <View className="row">
                      <View className='label' >打包费</View>
                      <View className='price'><Price price={store.packCost || 0} type={'sale'}></Price></View>
                    </View>
                  }
                </View>
              }

              {
                (store.isCatering &&
                  sceneDesktopManager.orderType === DesktopOrderType[0]) &&
                <View className='box people__number'>
                  <View
                    className='label'
                  >就餐人数</View>
                  <Input
                    type="number"
                    className='ipt'
                    placeholder='请输入就餐人数'
                    onInput={(e) => store.setValue('people_number', +e.detail.value)}
                  />
                </View>
              }

              {/* <View className='box order__info'>
              <view className='order__item'>
                <View className='label'>优惠券</View>
                <View className='val'>无<Icon name="arrow-right" size={14} color="#949494" /></View>
              </view>
              <view className='order__item'>
                <View className='label'>余额抵扣</View>
                <View className='val'>无<Icon name="arrow-right" size={14} color="#949494" /></View>
              </view>
            </View>
            <View className='box order__info'>
              <view className='order__item'>
                <View className='label'>菜品金额</View>
                <View className='val'>¥1200</View>
              </view>
              <view className='order__item'>
                <View className='label'>按人计算的金额？</View>
                <View className='val'>+ ¥12</View>
              </view>
              <view className='order__item'>
                <View className='label'>包间费</View>
                <View className='val'>无</View>
              </view>
              <view className='order__item'>
                <View className='label'>优惠券</View>
                <View className='val'>- ¥20</View>
              </view>

              <View className='order__price xxm-hairline--top'>
                实际付款：<Text className='price'>￥99</Text>
              </View>
            </View> */}


              <View className='box order__info'>
                <view className='order__item'>
                  <View className='label'>支付方式</View>
                  <View className='val'>
                    <Icon name="wechat-pay" size={22} color="#09BB07" />
                    <Text style={{ verticalAlign: 'super' }}>微信支付</Text>
                  </View>
                </view>
              </View>

              <View className='box note'>
                <Textarea
                  className='ipt note-textarea'
                  placeholder='请输入订单备注'
                  placeholderStyle="font-size: 11px"
                  onInput={(e) => store.setValue('note', e.detail.value)}
                />
              </View>
              {/* <View className="cart__bottom">

              <View className="total pt">
                <View className="total__number">
                  合计
                  <Text
                    className="y"
                    style="padding-left:10rpx;"
                  >￥
                  <Text style="font-size:34rpx;">{store.totalFree}</Text>
                  </Text>
                </View>
              </View>
              <View
                className="checkout"
                onClick={() => store.orderPay()}
              >
                提交订单
              </View>
            </View> */}
              <SubmitBarEle
                buttonText="提交订单"
                safeAreaInsetBottom
                price={store.totalFree}
                currency="￥"
                onSubmit={() => {
                  store.orderPay()
                }}

              />

            </View>
          )
        }
      }
    </Observer >
  )
}
